<template>
  <h4>学习toRef</h4>
  元数据：{{ person }}<br/>
  测试的数据(toRef)：{{ name }}<br/>
  测试的数据(ref)：{{ name1 }}<br/>
  测试的数据(reactive)：{{ name2 }}<br/>
  <br/>
  测试的数据(toRefs)：{{ age }}<br/>
  测试的数据(toRefs)：{{ sex }}<br/>
  测试的数据(toRefs)：{{ type }}<br/>
  测试的数据(toRefs)：{{ pet.type }}<br/>
  <button @click="onClick">修改数据</button>
</template>

<script>
import { reactive, ref, toRef, toRefs } from 'vue'

export default {
    name: 'Study_toRef',
    setup() {
        let person = reactive({
            name: '歼击机',
            age: 25,
            sex: '男',
            pet: {
                type: '小猫'
            }
        })

        function onClick() {
            person.name += '!'
            person.age += 1
            person.sex += '!'
            person.pet.type += '!'
        }

        return {
            person,
            onClick,
            name: toRef(person, 'name'),
            name1: ref(person.name).value,//不行
            name2: reactive(person.name),//不行

            ...toRefs(person)
        }
    }
}
</script>

<style>

</style>